<template>
  <div id="new_retained-analysis">
    <v-header ref="vHeader" title="留存分析" @on-save="saveComUse" :saveShow = "save" :showDownloadBtn="false"></v-header>
    <div class="content-main">
      <div class="container">
        <div class="condition-container bg-color-white">
          <div class="tags-and-condition">
            <div class="tags">
              <v-pageHeader ref="pageHeader" @on-click="showList" :InquireTransCode="inquireTransCode"
                            :setTransCode="setTransCode"
                            :delTransCode="delTransCode" itemKey="anal_id" itemValue="anal_name"
                            num="09"></v-pageHeader>
            </div>
            <div class="date">
              <span class="label font12">查询日期</span>
              <el-date-picker
                size="mini"
                v-model="fromDate"
                type="date"
                :picker-options="disableDate"
                placeholder="选择日期">
              </el-date-picker>
            </div>
            <div class="initial-event">
              <span class="label font12">初始事件</span>
              <el-select v-model="startEvent" placeholder="请选择" size="mini" class="width180">
                <el-option
                  v-for="item in data.B020002"
                  :key="item.meta_id"
                  :label="item.event_name"
                  :value="item.event_id">
                </el-option>
              </el-select>
            </div>
            <div class="follow-up-event">
              <span class="label font12">后续事件</span>
              <el-select v-model="endEvent" placeholder="请选择" size="mini" class="width180">
                <el-option
                  v-for="item in data.B020002"
                  :key="item.meta_id"
                  :label="item.event_name"
                  :value="item.event_id">
                </el-option>
              </el-select>
            </div>
            <div class="group-query">
              <span class="label font12">分组查询</span>
              <el-select v-model="groupVal" placeholder="请选择" size="mini" class="width180">
                <el-option
                  v-for="item in data.B010019"
                  :key="item.code_value"
                  :label="item.code_value_nm_cns"
                  :value="item.code_value">
                </el-option>
              </el-select>
            </div>
          </div>
          <!--筛选条件 start-->
          <div class="filter-conditions  bg-color-white font12">
            <div class="conditions-list">
              <div v-if="conditionList.length >= 2" class="group-btn" @click="toggle">
                  <v-button :width="30" :btnText="groupBtnVal.code_value_nm_cns"></v-button>
              </div>
              <div class="condition-group-list" v-for="(group, index) in conditionList" :key="group.key">
                <div class="group-head" v-if="index !== 0"></div>
                <div class="condition-group" v-for="(item, ind) in group.cond_groups" :key="item.key">
                  <div class="item-btn" v-if="ind !== 0">
                    <v-button :width="30" @on-click="toggleRelationship(item)"
                              :btnText="item.vs_bool_code_value === 'and' ? '且' : '或'"></v-button>
                  </div>
                  <div class="condition-group-item">
                    <el-select v-model="item.meta_id" class="width160 lf" placeholder="请选择"
                               @change="changeEvent(item)" filterable size="mini">
                      <el-option
                        v-for="val in cond_arr1"
                        :key="val.key"
                        :label="val.colume_chs"
                        :value="val.meta_id">
                      </el-option>
                    </el-select>
                    <el-select v-model="item.vs_code_value" class="width100 lf" placeholder="请选择"
                               @change="changeAttr(item)" filterable size="mini">
                      <el-option
                        v-for="val in cond_arr2"
                        :key="val.key"
                        :label="val.code_value_nm_cns"
                        :value="val.code_value">
                      </el-option>
                    </el-select>
                    <el-input v-if="getBool_1(item)" class="lf" v-model="item.cond_value[0]" size="mini"></el-input>
                    <div class="date-time lf" v-if="getBool_2(item)">
                      <span>在</span>
                      <el-date-picker
                        size="mini"
                        class="width270"
                        v-model="item.vs_date_value"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="change(item)">
                      </el-date-picker>
                      <span>之间</span>
                    </div>
                    <div class="amount-range lf" v-if="getBool_3(item)">
                      <span>在</span>
                      <el-input class="width160" v-model="item.cond_value[0]" placeholder="输入内容" size="mini"></el-input>
                      <span>和</span>
                      <el-input class="width160" v-model="item.cond_value[1]" placeholder="输入内容" size="mini"></el-input>
                      <span>之间</span>
                    </div>
                    <v-selectCheckbox v-if="getBool_4(item)" class="address-list lf" :options="countryList"
                                      :closable="true"></v-selectCheckbox>
                    <div class="icons-list lf">
                      <i class="iconfont icon-close" @click="remove_cond(index, ind)"></i>
                      <i class="iconfont icon-add" @click="addRow(group, ind)"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="add-condition">
              <el-button type="primary" plain icon="el-icon-plus" @click="addCondition"></el-button>
              <span>筛选条件</span>
            </div>
            <div class="examine">
              <div class="btns rf">
                <el-button type="primary" size="mini" @click="search">查看</el-button>
                <el-button size="mini" @click="cancelEven">重置</el-button>
              </div>
            </div>
          </div>
          <!--筛选条件 end-->
        </div>
        <div class="data-table bg-color-white">
          <div class="tabs">
            <el-tabs v-model="tableVal" @tab-click="handleClick">
              <el-tab-pane label="7日留存" name="7th"></el-tab-pane>
              <el-tab-pane label="14日留存" name="14th"></el-tab-pane>
            </el-tabs>
          </div>
          <div class="tables">
            <!--7日留存-->
            <el-table
              v-if="tableVal === '7th'"
              :data="tableData"
              border
              style="width: 100%">
              <el-table-column
                v-for="item in header_7th"
                :key="item.key"
                :align="item.text_align"
                :prop="item.key"
                :label="item.label">
              </el-table-column>
            </el-table>
            <!--14日留存-->
            <el-table
              v-else
              :data="tableData"
              border
              style="width: 100%">
              <el-table-column
                v-for="item in header_14th"
                :key="item.key"
                :align="item.text_align"
                :prop="item.key"
                :label="item.label">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import { VHeader, VPageHeader, VButton } from '../../../../components'
  import api from '../../../../api/url'
  import Msg from '../../../../assets/js/msg'
  import ajax from '../../../../api/ajax/ajax'
  import { getDateTime1, dateFormat } from '../../../../assets/js'

  export default {
    name: 'new_retained-analysis',
    components: {
      VHeader,
      VPageHeader,
      VButton
    },
    data () {
      return {
        save: true,
        inquireTransCode: api.SELECTBAARCHANALLIST, // 查询
        setTransCode: api.SETTINGBAARCHANALFORTOP, // 设置 / 取消置顶
        delTransCode: api.DELETEBAARCHANAL, // 删除常用
        fromDate: '', // 查询日期
        disableDate: { // 禁用当天之后的日期
          disabledDate (time) {
            return time.getTime() > (new Date().getTime())
          }
        },
        data: {}, // 常量数据
        startEvent: '', // 初始事件
        endEvent: '', // 后续事件
        groupVal: '', // 分组查询
        /* 筛选条件 start */
        conditionList: [], // 筛选条件返回的list
        cond_arr2: null, // 条件筛选的第二框
        cond_arr4: null, // 条件筛选的第二框
        groupBtnVal: null, // 条件筛选，第三方变量，最外层 且 / 或 的值
        /* 筛选条件 end */
        tableVal: '7th', // 控制表格显示
        tableData: [], // 表格数据
        header_7th: [
          {
            text_align: '',
            key: 'group_colume',
            label: '分组项'
          },
          {
            text_align: 'center',
            key: 'total_counts',
            label: '初始用户人数'
          },
          {
            text_align: 'center',
            key: 'day1',
            label: '首日'
          },
          {
            text_align: 'center',
            key: 'day2',
            label: '次日'
          },
          {
            text_align: 'center',
            key: 'day3',
            label: '2天后'
          },
          {
            text_align: 'center',
            key: 'day4',
            label: '3天后'
          },
          {
            text_align: 'center',
            key: 'day5',
            label: '4天后'
          },
          {
            text_align: 'center',
            key: 'day6',
            label: '5天后'
          },
          {
            text_align: 'center',
            key: 'day7',
            label: '6天后'
          }
        ],
        header_14th: [
          {
            text_align: '',
            key: 'group_colume',
            label: '分组项'
          },
          {
            text_align: 'center',
            key: 'total_counts',
            label: '初始用户人数'
          },
          {
            text_align: 'center',
            key: 'day1',
            label: '首日'
          },
          {
            text_align: 'center',
            key: 'day2',
            label: '次日'
          },
          {
            text_align: 'center',
            key: 'day3',
            label: '2天后'
          },
          {
            text_align: 'center',
            key: 'day4',
            label: '3天后'
          },
          {
            text_align: 'center',
            key: 'day5',
            label: '4天后'
          },
          {
            text_align: 'center',
            key: 'day6',
            label: '5天后'
          },
          {
            text_align: 'center',
            key: 'day7',
            label: '6天后'
          },
          {
            text_align: 'center',
            key: 'day8',
            label: '7天后'
          },
          {
            text_align: 'center',
            key: 'day9',
            label: '8天后'
          },
          {
            text_align: 'center',
            key: 'day10',
            label: '9天后'
          },
          {
            text_align: 'center',
            key: 'day11',
            label: '10天后'
          },
          {
            text_align: 'center',
            key: 'day12',
            label: '11天后'
          },
          {
            text_align: 'center',
            key: 'day13',
            label: '12天后'
          },
          {
            text_align: 'center',
            key: 'day14',
            label: '13天后'
          }
        ]
      }
    },
    methods: {
      getTableData (str) {
        let message = {
          group_by: this.groupVal, // 分组查询
          start_event: this.startEvent, // 初始事件
          end_event: this.endEvent, // 后续事件
          w_list: this.conditionList, // 事件筛选
          from_date: getDateTime1(this.fromDate),
          date_type: str,
          analyse_type: '09'
        }
        ajax.post(api.ANALYSESEARCHOBJECT, message).then(res => {
          this.tableData = res.data.rows
        })
      },
      handleClick (tab, event) {
        if (tab.name === '7th') {
          this.getTableData('04')
        } else {
          this.getTableData('05')
        }
      },
      // 保存为常用
      saveComUse (obj) {
        if (!this.fromDate) {
          Msg.alert('日期不能为空')
          return
        }
        if (!this.startEvent) {
          Msg.alert('初始事件不能为空')
          return
        }
        if (!this.endEvent) {
          Msg.alert('后续事件不能为空')
          return
        }
        if (!this.groupVal) {
          Msg.alert('分组查询不能为空')
          return
        }
        // 保存页面输入的内容
        const params = {
          start_event: this.startEvent, // 初始事件
          end_event: this.endEvent, // 后续事件
          group_by: this.groupVal, // 分组
          w_list: this.conditionList, // 事件筛选
          from_date: getDateTime1(this.fromDate)
        }
        // 调用 保存为常用接口
        ajax.post(api.SAVEASCOMMON, {
            anal_name: obj.pageHeaderName,
            anal_type: '09',
            is_top: obj.isTop,
            message_content: JSON.stringify(params)
          }).then(res => {
          Msg.alert('保存成功')
          ajax.post(this.inquireTransCode, {anal_type: '09'}).then(res => {
            this.$refs.pageHeader.getList(res.data)
          })
        })
      },
      // 查询常用数据
      showList (obj) {
        ajax.post(api.SELECTBAARCHANAL, { anal_id: obj.anal_id }).then(res => {
          // 数据反显在输入框 下拉框
          let data = JSON.parse(res.data.message_content)
          this.groupVal = data.group_by
          this.fromDate = dateFormat(data.from_date)
          this.startEvent = data.start_event
          this.endEvent = data.end_event
          this.conditionList = data.w_list
        })
      },
      // 添加筛选条件
      addCondition () {
        if (this.conditionList.length < 3) {
          let itemData = {
            vs_data_type: '',
            vs_code: '',
            vs_code_value: '',
            vs_bool_code: '',
            vs_bool_code_value: '',
            meta_id: null,
            disp_serial: null,
            cond_link: '',
            cond_fmt: '',
            cond_value: []
          }
          let groupData = {
            vs_bool_code: '',
            disp_serial: null,
            cond_link: null,
            elem_type: 'W',
            cond_groups: []
          }
          let count = this.conditionList.length
          this.cond_arr1 = this.data.META_COLUME
          this.conditionList.splice(this.conditionList.length, 0, groupData)
          this.conditionList[count].cond_groups.splice(0, 0, itemData)
          this.conditionList[count].disp_serial = count
          this.conditionList[count].cond_groups[0].disp_serial = this.conditionList[count].cond_groups.length - 1
          count++
        } else {
          Msg.alert('最多只能添加三行！')
        }
      },
      // 添加一行
      addRow (group, ind) {
        if (group.cond_groups.length < 3) {
          let itemData = {
            vs_data_type: '',
            vs_code: '',
            vs_code_value: '',
            vs_bool_code: 'B010006',
            vs_bool_code_value: this.data.B010006[0].code_value,
            meta_id: null,
            disp_serial: ind + 1,
            cond_link: '',
            cond_fmt: '',
            cond_value: []
          }
          itemData.cond_link = `${itemData.vs_bool_code}#${itemData.vs_bool_code_value}`
          group.cond_groups.splice(ind + 1, 0, itemData)
        } else {
          Msg.alert('最多只能添加三行！')
        }
      },
      // 删除一行
      remove_cond (index, ind) {
        if (this.conditionList.length === 1) {
          if (this.conditionList[index].cond_groups.length === 1) {
            this.conditionList.splice(index, 1)
          } else {
            if (ind === 0) {
              this.conditionList[index].cond_groups.splice(ind, 1)
              this.conditionList[index].cond_groups[ind].cond_link = ''
            } else {
              this.conditionList[index].cond_groups.splice(ind, 1)
            }
          }
        } else {
          if (this.conditionList[index].cond_groups.length === 1) {
            this.conditionList.splice(index, 1)
          } else {
            if (ind === 0) {
              this.conditionList[index].cond_groups.splice(ind, 1)
              this.conditionList[index].cond_groups[ind].cond_link = ''
            } else {
              this.conditionList[index].cond_groups.splice(ind, 1)
            }
          }
        }
      },
      // 区间日期改变事件
      change (item) {
        if (item.vs_date_value) {
          item.vs_date_value.forEach((val, key) => {
            item.cond_value[key] = getDateTime1(val)
          })
        }
      },
      // 切换行与行之间的 且 / 或
      toggleRelationship (item) {
        if (item.vs_bool_code_value === 'and') {
          item.vs_bool_code_value = 'or'
        } else {
          item.vs_bool_code_value = 'and'
        }
        item.cond_link = `${item.vs_bool_code}#${item.vs_bool_code_value}`
      },
      // 切换外层的且 / 或
      toggle () {
        if (this.groupBtnVal === this.data.B010006[0]) {
          this.groupBtnVal = this.data.B010006[1]
        } else {
          this.groupBtnVal = this.data.B010006[0]
        }
      },
      // 事件选择
      changeEvent (obj) {
        this.cond_arr1.forEach(item => {
          if (item.meta_id === obj.meta_id) {
            if (item.data_type === 'text') {
              this.cond_arr2 = this.data.B010003
              obj.vs_data_type = 'text'
              obj.vs_code = 'B010003'
            } else if (item.data_type === 'number') {
              this.cond_arr2 = this.data.B010004
              obj.vs_data_type = 'number'
              obj.vs_code = 'B010004'
            } else if (item.data_type === 'date') {
              this.cond_arr2 = this.data.B010005
              obj.vs_data_type = 'date'
              obj.vs_code = 'B010005'
            }
          }
        })
      },
      // 属性选择
      changeAttr (obj) {
        obj.cond_fmt = `${obj.vs_code}#${obj.vs_code_value}`
      },
      // 查看结果
      search () {
        if (!this.fromDate) {
          Msg.alert('日期不能为空')
          return
        }
        if (!this.startEvent) {
          Msg.alert('初始事件不能为空')
          return
        }
        if (!this.endEvent) {
          Msg.alert('后续事件不能为空')
          return
        }
        if (!this.groupVal) {
          Msg.alert('分组查询不能为空')
          return
        }
        this.getTableData('04')
      },
      // 重置
      cancelEven () { // 重置
        this.fromDate = ''
        this.groupVal = '' // 分组查询
        this.startEvent = '' // 初始事件
        this.endEvent = '' // 后续事件
        this.conditionList = [] // 事件筛选条件
      },
      // 判断条件
      getBool_1 (item) {
        const type = item.vs_data_type
        const value = item.vs_code_value
        if (type === 'number' && value > 0 && value < 9) { // 1-8
          return true
        } else if (type === 'text' && value > 0 && value < 11) { // 1-10
          return true
        } else if (type === 'date' && value > 0 && value < 11) { // 1-10
          return true
        }
      },
      getBool_2 (item) {
        if (item.vs_data_type === 'date' && item.vs_code_value === '15') {
          return true
        }
      },
      getBool_3 (item) {
        if (item.vs_data_type === 'number' && item.vs_code_value === '11') {
          return true
        }
      },
      getBool_4 (item) {
        return false
      }
    },
    created () {
      this.fromDate = new Date()
      this.data = JSON.parse(sessionStorage.getItem('commonData'))
      this.groupBtnVal = this.data.B010006[0]
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #new_retained-analysis
    height 100%
    .content-main
      height calc(100% - 56px)
      padding 10px 0 10px 10px
      .container
        padding-right 10px
        height 100%
        overflow auto
        .condition-container
          margin-bottom 10px
          .tags-and-condition
            border-bottom 1px solid #d8dce5
            & > div
              padding 0 20px
              height 50px
              line-height 50px
              & > span
                display inline-block
                width 80px
                margin-right 5px
            .tags
              border-bottom 1px solid #d8dce5
              height 51px
            .date
              .el-date-editor
                width 180px !important
          /*筛选条件 start*/
          .filter-conditions
            padding 20px
            .conditions-list:before
              content ''
              width 0
              height calc(100% - 20px)
              border-left 1px solid #D8DCE5
              position absolute
              left 15px
              top 10px
            .conditions-list
              padding-left 40px
              position relative
              .el-input__inner
                font-size 12px
              .group-btn
                position absolute
                left 0
                top 50%
                margin-top -15px
              .condition-group-list
                .group-head
                  height 50px
                .condition-group
                  & > div
                    height 50px
                    line-height 50px
                    padding-left 10px
                  .item-btn
                    position relative
                    .v-button
                      position absolute
                  .condition-group-item
                    // background #f4f4f5
                    overflow hidden
                    & > .el-input
                      width 120px
                    .date-time
                      padding-left 10px
                      .el-date-editor
                        position relative
                        margin 0 10px
                        padding-top 0
                        .el-range__icon
                          line-height 25px
                        .el-range-input, .el-range-separator
                          position relative
                        .el-range-separator
                          padding 0
                          font-size 12px
                    .amount-range
                      padding-left 10px
                      .el-input
                        margin 0 8px
                    .v-select-checkbox
                      margin-left 10px
                    .icons-list
                      margin-left 15px
                      i.iconfont
                        font-size 14px
                        margin-right 10px
                        color #D8DCE5
                      i.iconfont:hover
                        color #016DFB
            .add-condition
              width 150px
              height 50px
              line-height 50px
              padding 0 20px 0 30px
              cursor pointer
              .el-button
                width 30px
                height 30px
                display inline-block
                padding 0
                .el-icon-plus
                  font-size 16px
                  font-weight bold
              span
                font-size 12px
                color #016DFB
                margin-left 10px
            .examine
              height 30px
              line-height 30px
              padding 0 20px
              margin-top 30px
              .btns
                width 144px
                .el-button
                  display inline-block
                  width 65px
                  height 30px
                  line-height 0
          /*筛选条件 end*/
        .data-table
          padding 10px
          .tabs
            text-align right
            padding-right 20px
            .el-tabs--top
              display inline-block
              .el-tabs__header
                margin 0
              .el-tabs__nav-wrap::after, .el-tabs__active-bar
                background #fff
</style>
